<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/font/iconfont.css">
    <link rel="stylesheet" href="./css/index2.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/regj2.css">
</head>
<body>
     <!-- 头部 start-->
    <header id="top">
            <div class="header_top">
                <div class="header_topbar fr">
                    <div class="topbar_login">
                        <p class="p1">
                            <a href="./logon2.html">登录</a>&nbsp;或&nbsp;<a href="./regj2.html">注册</a>&nbsp;ANTA会员
                        </p>
                        <p class="p2" style="display: none;">
                            <a href="javascript:;">欢迎：<span></span></a>
                        </p>
                    </div>
                    <div class="topbar_cart">
                        <a href="./cart2.html" class="iconfont icon-gouwuchefill"></a>
                    </div>
                    <div class="topbar_service">
                        <a href="javascript:;" class="iconfont icon-custom-service"></a>
                    </div>
                    <div class="topbar_en">
                        <a href="javascript:;">EN</a>
                    </div>
                </div>
            </div>
            <div class="header_bottom">
                <div class="header_logo fl">
                    <a href="./index2.html">
                        <img src="./img/logo-anta.svg" alt="" width="">
                    </a>
                </div>
                <ul class="header_nav fr">
                    <li class="nav_item">
                        <a href="./list2.html">冬奥国旗款</a>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">男子</a>
                        <div class="menu_two">
                            <div class="menu_inner">
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">运动鞋</a></li>
                                    <li><a href="javascript:;">跑鞋</a></li>
                                    <li><a href="javascript:;">篮球鞋</a></li>
                                    <li><a href="javascript:;">休闲鞋</a></li>
                                    <li><a href="javascript:;">板鞋</a></li>
                                    <li><a href="javascript:;">户外综训鞋</a></li>
                                </ul>
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有服装</a></li>
                                    <li><a href="javascript:;">套头卫衣</a></li>
                                    <li><a href="javascript:;">外套夹克</a></li>
                                    <li><a href="javascript:;">羽绒服/马甲</a></li>
                                    <li><a href="javascript:;">短袖T恤</a></li>
                                    <li><a href="javascript:;">长裤</a></li>
                                    <li><a href="javascript:;">运动裤</a></li>
                                </ul>
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有配件</a></li>
                                    <li><a href="javascript:;">包类</a></li>
                                    <li><a href="javascript:;">运动袜子</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                                <ul class="cate_list" style="border-right: 0;">
                                    <li><a href="javascript:;">运动项目</a></li>
                                    <li><a href="javascript:;">跑步</a></li>
                                    <li><a href="javascript:;">篮球</a></li>
                                    <li><a href="javascript:;">综训</a></li>
                                    <li><a href="javascript:;">生活</a></li>
                                    <li><a href="javascript:;">健身</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">女子</a>
                        <div class="menu_two">
                            <div class="menu_inner">
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">跑鞋</a></li>
                                    <li><a href="javascript:;">休闲鞋</a></li>
                                    <li><a href="javascript:;">板鞋</a></li>
                                    <li><a href="javascript:;">棉鞋</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有服装</a></li>
                                    <li><a href="javascript:;">羽绒服</a></li>
                                    <li><a href="javascript:;">套头卫衣</a></li>
                                    <li><a href="javascript:;">羽绒服/马甲</a></li>
                                    <li><a href="javascript:;">长裤</a></li>
                                    <li><a href="javascript:;">短袖T恤</a></li>
                                    <li><a href="javascript:;">运动短裤</a></li>
                                </ul>
                                <ul class="cate_list" style="border-right: 0;">
                                    <li><a href="javascript:;">所有配件</a></li>
                                    <li><a href="javascript:;">包类</a></li>
                                    <li><a href="javascript:;">运动袜类</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">儿童</a>
                        <div class="menu_two">
                            <div class="menu_inner">
                                <ul class="cate_list">
                                    <li><a href="javascript:;">新品上市</a></li>
                                    <li><a href="javascript:;">男中大童</a></li>
                                    <li><a href="javascript:;">女中大童</a></li>
                                    <li><a href="javascript:;">男小童</a></li>
                                    <li><a href="javascript:;">女小童</a></li>
                                    <li><a href="javascript:;">婴童</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">跑鞋</a></li>
                                    <li><a href="javascript:;">篮球鞋</a></li>
                                    <li><a href="javascript:;">休闲鞋</a></li>
                                    <li><a href="javascript:;">板鞋</a></li>
                                    <li><a href="javascript:;">足球鞋</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                                <ul class="cate_list">
                                    <li><a href="javascript:;">所有服饰</a></li>
                                    <li><a href="javascript:;">套头卫衣</a></li>
                                    <li><a href="javascript:;">羽绒服</a></li>
                                    <li><a href="javascript:;">短袖T恤</a></li>
                                    <li><a href="javascript:;">运动短裤</a></li>
                                    <li><a href="javascript:;">长裤</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                                <ul class="cate_list" style="border-right: 0;">
                                    <li><a href="javascript:;">所有配饰</a></li>
                                    <li><a href="javascript:;">包类</a></li>
                                    <!-- <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li>
                                    <li><a href="javascript:;">所有鞋类</a></li> -->
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">安踏儿童</a>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">品牌文化</a>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">观赏视频</a>
                    </li>
                    <li class="nav_item">
                        <a href="javascript:;">联系我们</a>
                    </li>
                    <li class="nav_item last_li">
                        <div class="nav_search">
                            <a href="javascript:;" class="nav_search_btn iconfont icon-xiangshang"></a>
                            <input type="text" class="nav_search_ipt" placeholder="搜索">
                        </div>
                    </li>
                </ul>
            </div>
    </header>
    <!-- 头部 end-->
    <!-- main -->
    <main>
        <div class="wrapper">
            <div class="wrap">
                <div class="layout">
                    <div class="layout_container">
                        <div class="tab_box">
                            <div class="tab_box_main">
                                <a href="javascript:;" class="active a_btn1">手机注册</a>
                                <a href="javascript:;" class="a_btn2">用户注册</a>
                            </div>
                        </div>
                        <form>
                            <div class="regbox1">
                                <h5>请输入手机号码注册：</h5>
                                <div class="phone_user">
                                    <input type="text" name="username" placeholder="手机号码">
                                </div>
                                <div class="verification">
                                    <div class="fl">
                                        <input type="text" placeholder="图片验证码">
                                    </div>
                                    <img src="https://www.anta.cn/api.php?s=antacom/passport/code.html&w=120&h=36"
                                        alt="" class="fr">
                                </div>
                                <div class="select_content">
                                    <label>
                                        <input type="checkbox" name="">
                                        我已充分阅读、理解并接受
                                        <a href="javascript:;">个人信息保护政策</a>
                                        的全部内容
                                    </label>
                                </div>
                                <div class="fixed_bot">
                                    <input type="submit" class="confirm_btn" value="确认">
                                </div>
                            </div>
                            <div class="regbox2" style="display: none;">
                                <h5>请输入用户名注册：</h5>
                                <div class="mailbox_user">
                                    <input type="text" name="username" placeholder="用户名" id="txt">
                                    <span id="s1"></span>
                                </div>
                                <div class="mailbox_pass">
                                    <input type="password" name="userpass" placeholder="登录密码" id="pass">
                                </div>
                                <!-- <div class="verification">
                                    <div class="fl">
                                        <input type="text" placeholder="图片验证码">
                                    </div>
                                    <img src="https://www.anta.cn/api.php?s=antacom/passport/code.html&w=120&h=36"
                                        alt="" class="fr">
                                </div> -->
                                <div class="select_content">
                                    <label>
                                        <input type="checkbox" name="">
                                        我已充分阅读、理解并接受
                                        <a href="javascript:;" class="">个人信息保护政策</a>
                                        的全部内容
                                    </label>
                                </div>
                                <div class="fixed_bot">
                                    <input type="button" class="confirm_btn" value="确认" id="btn">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- main -->

    <!-- 脚部 start -->
    <footer>
        <div class="footer_inner">
            <div class="footer_left fl">
                <img src="./img/footer-anta.svg" alt="">
            </div>
            <div class="footer_right fr">
                <ul class="links_line">
                    <li style="border-left: 0;">
                        <a href="javascript:;">安踏海外</a>
                    </li>
                    <li>
                        <a href="javascript:;">安踏投资者关系</a>
                    </li>
                </ul>
                <div class="footer_copyright">
                    <div style="margin-bottom: 6px;">
                        <span>Copyright(C) 2020 by www.ANTA.com</span>
                        <span>©安踏体育用品有限公司版权所有</span>
                        <a href="javascript:;">营业执照</a>
                        <a href="javascript:;">开户许可证</a>
                    </div>
                    <div>
                        <a href="javascript:;">闽ICP备11020421号-1</a>
                        <a href="javascript:;">闽公网安备35058202000423号</a>
                    </div>
                </div>
                <ul class="links_line">
                    <li style="border-left: 0;"><a href="javascript:;">安踏儿童</a></li>
                    <li><a href="javascript:;">Fila</a></li>
                    <li><a href="javascript:;">Kolon Sport</a></li>
                    <li><a href="javascript:;">Descente</a></li>
                    <li><a href="javascript:;">Sprandi</a></li>
                    <li><a href="javascript:;">Kingkow</a></li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- 脚部 end -->
</body>
</html>
<script src="./node_modules/_jquery@3.6.0@jquery/dist/jquery.min.js"></script>
<script src="./js/anta.js"></script>

<script>
    // 二级菜单
    $('.nav_item').mouseover(function () {
        $(this).find('.menu_two').show()
        }).mouseout(function () {
            $(this).find('.menu_two').hide()
    })

    //注册页选项卡
    $('.tab_box_main').on('click', 'a', function () {
        $('.tab_box_main>a').removeClass('active', '::after')
        $(this).addClass('active', '::after')
    })
    $('.a_btn1').on('click', function () {
        $('.regbox1').css('display', 'block')
        $('.regbox2').css('display', 'none')
    })
    $('.a_btn2').on('click', function () {
        $('.regbox1').css('display', 'none')
        $('.regbox2').css('display', 'block')
    })

    let user = document.getElementById("txt")
    let pass = document.getElementById('pass')
    let btn = document.getElementById('btn')
    let s1 = document.getElementById('s1')
    // 验证用户名接口
    user.onblur = function () {
        $.ajax({
            type: "GET",
            url: "./goodsAndShoppingCart/checkUser.php",
            data: `username=${user.value}`,
            success: function (data) {
                if (data.trim() == '1') {
                    $('#s1').html('用户名可用').css('color', 'green')
                } else if (data.trim() == '0') {
                    $('#s1').html('用户名重复').css('color', 'red')
                }
            }
        })
    }
    // 注册接口
    btn.onclick = function () {
        $.ajax({
            type: "POST",
            url: "./goodsAndShoppingCart/addUser.php",
            data: `username=${user.value}&userpass=${pass.value}`,
            success: function (data) {
                if (data.trim() == 'success') {
                    location.href = 'logon2.html'
                }
            }
        });
    }
</script>